<template>
	<view class="content">
		<scroll-view scroll-y="true">
			<view class="index-list">
				<view class="index-list-item" v-for="(item, index) in topList" :key="index"
					@click="handleNavtoList(item.id)">
					<view class="index-list-img">
						<image class="index-list-img" :src="item.coverImgUrl" mode=""></image>
						<text>{{ item.updateFrequency }}</text>
					</view>
					<view class="index-list-text">
						<view v-for="(track, trackIndex) in item.tracks" :key="track.first">
							<text>
								{{ trackIndex+1 }}. {{ limitLength(track.first, 10) }} - {{ track.second }}
							</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import {getTopListData,listDetail} from '@/common/api.js';
	export default {
		data() {
			return {
				title: 'Hello',
				topList: [],
			}
		},
		async onLoad() {
			try {
				const data = await new Promise((resolve) => {
					getTopListData((result) => {
						resolve(result);
					});
				});
				this.topList = data;
			} catch (error) {
				console.error('Failed to fetch top list data:', error);
			}
		},
		methods: {
			limitLength(str, maxLength) {
				if (str.length > maxLength) {
					return str.slice(0, maxLength) + '...';
				} else {
					return str;
				}
			},
			handleNavtoList(id) {
				uni.navigateTo({
					url: '/pages/list/list?listid=' + id,
				})
			}
		}
	}
</script>
<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.index-list {
		margin: 30rpx;
		width: 90%;
	}

	.index-list-item {
		display: flex;
		margin-bottom: 35rpx;
	}

	.index-list-img {
		width: 212rpx;
		height: 212rpx;
		margin-right: 20rpx;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.index-list-img image {
		width: 100%;
		height: 100%;
	}

	.index-list-img text {
		position: sticky;
		font-size: 22rpx;
		color: white;
		bottom: 15rpx;
		left: 15rpx;
	}

	.index-list-text {
		flex: 1;
		font-size: 24rpx;
		line-height: 68rpx;
	}

	.index-list-text view {}
</style>